<template>
  <a-select
      v-model:value="value"
      show-search
      placeholder="选择用户策略"
      option-filter-prop="children"
      style="width: 200px"
      @change="handleChange"
  >
    <a-select-option v-for="item in list" :key="item.id" :value="item.id">
      {{item.name}}
    </a-select-option>
  </a-select>
</template>

<script lang="ts">
import {defineComponent, toRefs, reactive} from 'vue'
import {Select} from 'ant-design-vue'
import {userStrategyList} from '@/api/strategy/user'

export default defineComponent({
  name: "select-template",
  components: {[Select.name]: Select, "a-select-option": Select.Option},
  props: ['modelValue'],
  setup(props, {emit}) {
    const state = reactive({
      list: [] as any[],
      value: [props.modelValue]
    })
    console.log(props.modelValue, '哎')
    userStrategyList({page: 1,limit: 1000}).then(res => state.list = res.data)
    const handleChange = (value) => {
      emit('update:modelValue', value.toString())
    }

    return {
      ...toRefs(state),
      handleChange
    }
  }
})
</script>

<style scoped>
</style>
